<div th:fragment="control_chart_scatter">
<script type="text/javascript">
	//示例数据
	var get_scatter_option = function()
	{
		return {
		    legend: {
		        data: []
		    },
		    "grid" : [ {
				"show" : false,
				"top" : 50,
				"bottom" : 90,
				"left" : 50,
				"right" : 65,
				"containLabel" : false
			} ],
		    xAxis: [ {
	    	 	"type" : "value",
				"name" : "x轴",
				"boundaryGap" : false,
				"axisLine" : {
					"show" : true
				},
				"axisTick" : {
					"show" : true
				},
				"splitLine" : {
					"show" : false,
					"lineStyle" : {
						"color" : "#8e8e8e",
						"width" : 1,
						"type" : "solid"
					}
				},
				"axisLabel" : {
					"rotate" : -30,
					"formatter": 0,
					"textStyle" : {
						"color" : "#777777",
						"fontSize" : 12
					}
				}
			} ],
		    yAxis: [ {
		    	"boundaryGap" : true,
				"name" : "y轴",
				"axisLine" : {
					"show" : true
				},
				"axisTick" : {
					"show" : true
				},
				"splitLine" : {
					"show" : false
				},
				"axisLabel" : {
					"rotate" : -30,
					"interval": 0,
					"formatter": 0,
					"textStyle" : {
						"color" : "#777777",
						"fontSize" : 12
					}
				},
		        scale: true
			} ],
			 "color" : [ "#02af6d", "#58abf9", "#d79de3", "#f9be58", "#b5ea7c", "#fa9c7d", "#01bc6f", "#60C0DD", "#D7504B", "#C6E579", "#F4E001", "#26C0C0" ],
		    series:[],
		    sql : ""
		};
	}
	
	/** 柱状图元数据 */
	function metadata_scatter(params)
	{
			var series = {
			            name: '系列一',
			            column : "SUMVALUE",
			            data: [[44056,81.8,23968973,'Australia',2015],[43294,81.7,35939927,'Canada',2015],[13334,76.9,1376048943,'China',2015],[21291,78.5,11389562,'Cuba',2015],[38923,80.8,5503457,'Finland',2015],[37599,81.9,64395345,'France',2015],[44053,81.1,80688545,'Germany',2015],[42182,82.8,329425,'Iceland',2015],[5903,66.8,1311050527,'India',2015],[36162,83.5,126573481,'Japan',2015],[1390,71.4,25155317,'North Korea',2015],[34644,80.7,50293439,'South Korea',2015],[34186,80.6,4528526,'New Zealand',2015],[64304,81.6,5210967,'Norway',2015],[24787,77.3,38611794,'Poland',2015],[23038,73.13,143456918,'Russia',2015],[19360,76.5,78665830,'Turkey',2015],[38225,81.4,64715810,'United Kingdom',2015],[53354,79.1,321773631,'United States',2015]],
			            type: 'scatter',
			            symbolSize: function (data) {
			                return Math.sqrt(data[2]) / 5e2;
			            },
			            label: {
			                emphasis: {
			                    show: true,
			                    formatter: function (param) {
			                        return param.data[3];
			                    },
			                    position: 'top'
			                }
			            },
			            itemStyle: {
			                normal: {
			                    shadowBlur: 0,
			                    shadowColor: 'rgba(25, 100, 150, 0.5)',
			                    shadowOffsetY: 5,
			                }
			            }
			};
			var legendData = {
					"name" : "系列一",
					"icon" : "emptyCircle"
				};
			var opt = get_scatter_option();// 每个视图创建新的option，防止相互污染
			opt.series.push(series);
			opt.legend.data.push(legendData);
		params = $.extend({}, {
			GRID : {},
			X_Y_AXIS : {},
			DATASET : {
				series : series,
				legend : legendData
			},
			OPTION : opt
		}, params);
		return $.extend(new metadata_chart_common(params), this);
	}
	
	/** 柱状图 元数据视图 面板视图 */
	function metadata_view_scatter(control)
	{
		
		this.DATASET = function()
		{
			var view = $($("#DATASET").html());
			var _this = this;
			var option = this.control.getMetadata("OPTION");
			var seriesData = $.extend({}, this.control.getMetadata("DATASET").series);
			var legendData = $.extend({}, this.control.getMetadata("DATASET").legend);
			var series = option.series, sql = option.sql;
			
			var setDataSetDetail = function(s)
			{
				var name = s.name, type = s.type, column = s.column;
				var detail_view = $($("#DATASET_DETAIL_SCATTER").html());
				detail_view.find("input[name=title]").val(name);
				detail_view.find("input[name=column]").val(column);
				detail_view.find("select").val(type);
				return detail_view;
			}
			var getDataSetDeatil = function()
			{
				option.sql = $(view).find("textarea").val();
				$(view).find(".dataset_detail").each(function(i, item)
				{
					var n = $(item).find("input[name=title]").val();
					var c = $(item).find("input[name=column]").val();
					var t = $(item).find("select").val();
					$.extend(option.series[i], {
						name : n,
						column : c,
						type : t
					});
					$.extend(option.legend.data[i], {
						name : n
					});
				});
			}
			$(view).find("textarea").val(sql);
			for ( var i in series)
			{
				$(view).append(setDataSetDetail(series[i]));
			}
			//增加按钮
			view.find(".add-btn").click(function()
			{
				var p = $.extend({}, seriesData);
				option.series.push(p);
				option.legend.data.push($.extend({}, legendData));
				$(view).append(setDataSetDetail(p));
				_this.linkViewOption(option);
			});
			//系列名、字段名
			view.on("keyup", "input,textarea", function()
			{
				getDataSetDeatil();
				_this.linkViewOption(option);
			});
			//系列类型
			view.on("change", "select", function()
			{
				getDataSetDeatil();
				_this.linkViewOption(option);
			});
			//SQL执行按钮
			view.on("click", ".sql-btn", function()
			{
				var sql = $(view).find("textarea").val();
				queryChartBySql(sql, "column", function(result)
				{
					try
					{
						if (result.state == "true")
						{
							option.xAxis[0].data = result.NAME;
							option.yAxis[0].data = result.NAME;
							for ( var i in series)
							{
								series[i].data = result[series[i].column];
							}
							_this.linkViewOption(option);
						} else
						{
							$.QuickAlert.alertFail({
								content : result.faultInfo
							});
						}
					} catch (e)
					{
						console.error(e);
					}
				});
			});
			//删除按钮
			view.on("click", ".delete-btn", function()
			{
				var index = $(this).index(".delete-btn");
				option.series.splice(index, 1);
				option.legend.data.splice(index, 1);
				$(this).parents(".dataset_detail").remove();
				_this.linkViewOption(option);
			});
			$(this.settingPanel).append(view);
		}
		this.X_Y_AXIS = function()
		{
			var view = $($("#X_Y_AXIS").html());
			var metadata = this.control.getMetadata();
			var _this = this;
			var option = metadata["OPTION"];
			var tr = $("<tr>");
			
			$(view).find("table").append(tr);
			$(view).find("input[name=xAxis]").val(option.xAxis[0].name);
			$(view).find("input[name=yAxis]").val(option.yAxis[0].name);
			$(view).find("input[name=xRotate]").val(option.xAxis[0].axisLabel.rotate);
			$(view).find("input[name=yRotate]").val(option.yAxis[0].axisLabel.rotate);
			/* $(view).find("input[name=xFormatter]").val(option.xAxis[0].axisLabel.formatter);
			$(view).find("input[name=yFormatter]").val(option.yAxis[0].axisLabel.formatter); */
			//$(view).find("select[name=xInterval]").val(option.xAxis[0].axisLabel.interval);
			//$(view).find("select[name=yInterval]").val(option.yAxis[0].axisLabel.interval);
			$(view).find("input[name]").keyup(function()
			{
				option.xAxis[0].name = $(view).find("input[name=xAxis]").val();
				option.yAxis[0].name = $(view).find("input[name=yAxis]").val();
				option.xAxis[0].axisLabel.rotate = $(view).find("input[name=xRotate]").val();
				option.yAxis[0].axisLabel.rotate = $(view).find("input[name=yRotate]").val();
				_this.linkViewOption(option);
			});
			
			$(this.settingPanel).append(view);
		}
		
		return $.extend(new metadata_view_chart_common(control), this);
	}

	
	/** 柱状图 表单视图 */
	function metadata_form_view_scatter(control)
	{
		return $.extend(new metadata_form_view_chart_common(control), this);
	}
</script>


<!-- 控制面板 图表 X/Y轴单位 -->
<script type="text/html" id="X_Y_AXIS">
<div class="form-setting-group">
	<table class="setting-control-table">
		<tr class="setting-control-title">
			<td colspan="4">坐标轴设置</td>
		</tr>
		<tr>
			<td class="setting-control-label">X轴单位</td>
			<td><input name="xAxis" class="form-control"></td>
			<td class="setting-control-label">Y轴单位</td>
			<td><input name="yAxis" class="form-control"></td>
		</tr>
		<tr>
			<td class="setting-control-label">X轴项目类角度</td>
			<td><input name="xRotate" class="form-control"></td>
			<td class="setting-control-label">Y轴项目类角度</td>
			<td><input name="yRotate" class="form-control"></td>
		</tr>
		
	</table>
</div>
</script>
<script  type="text/html" id="X_SHOW">
	<td class="setting-control-label">x轴是否显示全部</td>
	<td>
		<select name="xInterval" class="form-control" style="width:100px;">
			<option value="1">否</option>
			<option value="0">是</option>
		</select>
	</td>
</script>
<script  type="text/html" id="Y_SHOW">
	<td class="setting-control-label">y轴是否显示全部</td>
	<td>
		<select name="yInterval" class="form-control" style="width:100px;">
			<option value="1">否</option>
			<option value="0">是</option>
		</select>
	</td>
</script>

<!-- 控制面板 图表 dataSet基本配置 -->
<script type="text/html" id="DATASET">
<div class="form-setting-group">
	<table class="setting-control-table">
		<tr class="setting-control-title">
			<td colspan="2">dataSea配置</td>
		</tr>
		<tr>
			<td colspan="2"><textarea class='form-control' placeholder="请配置SQL语句"></textarea></td>
		</tr>
		<tr>
			<td class="setting-control-form2"><a href="javascript:;" class="btn btn-default btn-sm sql-btn">执行SQL</a></td>
			<td><a href="javascript:;" class="btn btn-default btn-sm add-btn">增加dataSea</a></td>
		</tr>
	</table>
</div>
</script>
<!-- 控制面板 图表 dataSet详细配置 -->
<script type="text/html" id="DATASET_DETAIL_SCATTER">
<div class="dataset_detail">
	<table class="setting-control-table">
		<tr>
			<td class="setting-control-label">名称</td>
			<td><input name="title" class="form-control"></td>
			<td class="setting-control-label">字段</td>
			<td><input name="column" class="form-control"></td>
			<td>
				<a href="javascript:;" class="btn btn-default btn-sm delete-btn">删除</a>
			</td>
		</tr>
	</table>
</div>
</script>
</div>
